<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .screen {
            width: 200px;
            height: 100px;
            margin: 0 auto;
            background-color: grey;
            color: white;
            line-height: 100px;
            text-align: center;
            border-radius: 10px;
        }

        .add-btn {
            margin:10px auto;
            width: 100px;
            height: 50px;
            font-size: 20px;
            line-height: 20px;
            display: block;

        }
    </style>
</head>
<body>
    <!-- <h1 id ="abc">这是个标题</h1> -->
    <div class="screen">0</div>
    <button class="add-btn">+</button>
    <!-- <h1>这也是标题</h1> -->
    <!-- <div> -->
        <!-- 这是一个div -->
    <!-- </div> -->

    <script>
        //可以使用querySelector选中上述h1元素对应的对象
        // let elem = document.querySelector('h1');
        // console.log(elem);
        // let elem1 = document.querySelector('#abc');
        // console.log(elem1);
        
        // let elem = document.querySelector('div');
        // elem.onclick = function() {
            // console.log(elem.innerHTML);
            // elem.innerHTML += "这是追加的内容"
        // };
        let screen = document.querySelector('.screen');
        let addBtn = document.querySelector('.add-btn');
        addBtn.onclick = function() {
            //1. 拿到screen里面的值
            let number = screen.innerHTML;
            //2. 针对number加一
            //由于innerHTML拿到的结果是String,需要转换成number
            number = parseInt(number);
            number += 1;
            //3. 写会到元素中
            screen.innerHTML = number;
        }
    </script>
 
</body>
</html>